<template>
  <div class="setcontainer">
    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <ul class="mui-table-view mui-table-view-chevron head">
            <li class="mui-table-view-cell mui-media mui-head">
              <!-- class="mui-navigate-right" -->
              <a href="#account">
                <img
                  class="mui-media-object mui-pull-left head-img"
                  id="head-img"
                  src="../assets/tx.jpg"
                />

                <div class="mui-media-body">
                  离殇
                  <p class="mui-ellipsis">账号:2622304854@qq.com</p>
                </div>
              </a>
            </li>
          </ul>

          <nav class="mui-bar-tab">
            <a class="mui-tab-item1" href="javascript:;">
              <span class="mui-icon iconfont icon-home"></span>
              <span class="mui-tab-label">待支付</span>
            </a>
            <a class="mui-tab-item1" href="javascript:;">
              <span class="mui-icon iconfont icon-groupctrl"></span>
              <span class="mui-tab-label">代发货</span>
            </a>
            <a class="mui-tab-item1" href="javascript:;">
              <span class="mui-icon iconfont icon-cart"></span>
              <span class="mui-tab-label">待收货</span>
            </a>
            <a class="mui-tab-item1" href="javascript:;">
              <span class="mui-icon iconfont icon-nickname"></span>
              <span class="mui-tab-label">待评价</span>
            </a>
          </nav>

          <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">
              <!-- class="mui-navigate-right" -->
              <router-link to="/search/account">账号与安全</router-link>
            </li>
          </ul>
          <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">
              <!-- class="mui-navigate-right" -->
              <a href="#notifications">我的优惠券</a>
            </li>
            <li class="mui-table-view-cell">
              <!-- class="mui-navigate-right" -->
              <a href="#privacy">我的红包</a>
            </li>
            <li class="mui-table-view-cell">
              <!-- class="mui-navigate-right" -->
              <a href="#general">我的会员卡</a>
            </li>
          </ul>
           <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">
              <!-- class="mui-navigate-right" -->
              <a href="#notifications">我的心愿单</a>
            </li>
            <li class="mui-table-view-cell">
              <!-- class="mui-navigate-right" -->
              <a href="#privacy">我的收藏</a>
            </li>
          </ul>
          <ul class="mui-table-view mui-table-view-chevron">
            <li class="mui-table-view-cell">
              <!-- class="mui-navigate-right" -->
              <a href="#about">
                关于乐购
                <i class="mui-pull-right update">V1.0.1</i>
              </a>
            </li>
          </ul>
          <ul class="mui-table-view outback" @click="bck">
            <li class="mui-table-view-cell" style="text-align: center;">
              <a>退出登录</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
import { Toast } from "mint-ui";
import "../lib/mui/css/iconfont.css";
export default {
    data(){
        return{

        }
    },
    methods:{
        bck(){
            Toast({ message: "退出成功", duration: 1000 });
            this.$router.push("/search")
        }
    }
};
</script>

<style scoped>
.mui-head{
    padding: 15px;
}
.mui-pull-right {
    float: right;
}
.mui-table-view {
    margin-top: 20px;
}
.update {
    font-style: normal;
    color: 
    #999999;
    margin-right: -25px;
    font-size: 15px;
}
.outback{
    background-color:#da1414;
    /* border-radius: 5px; */
    color: white;
    margin-top: 7px;
    cursor: pointer;
}
.mui-page-content{
    color: #929292;
}
.mui-scroll {
  margin-top: 41px;
  background-color: #efeff4;
}
.head-img {
  width: 42px;
  border-radius: 50%;
}
.head {
  margin-top:-1px;
  background-image:url("../assets/123.png")
  
}
.mui-bar-tab .mui-tab-item1.mui-active {
  color: #007aff;
}

.mui-bar-tab .mui-tab-item1 {
  /* writing-mode:vertical-lr; */
  display: table-cell;
  overflow: hidden;
  width: 1%;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #929292;
}
.icon-home{
    background-color: #2fb8ce;
    border-radius: 50%;
    color:white;
}
.icon-groupctrl{
    background-color: #f05e5e;
    border-radius: 50%;
    color:white;
}
.icon-cart{
    background-color: #57be5c;
    border-radius: 50%;
    color:white;
}
.icon-nickname{
    background-color: #d7e054;
    border-radius: 50%;
    color:white;
}
.mui-bar-tab .mui-tab-item1 .mui-icon {
  top: 3px;
  width: 30px;
  height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item1 .mui-icon ~ .mui-tab-label {
  font-size: 13px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mui-bar-tab{
    margin-bottom: 10px;
    margin-top: 10px;
}
</style>